<template>
  <div v-html="value"></div>
</template>

<script>
import marked from "marked";
import hljs from "highlight.js";
export default {
  data() {
    return {
      value: "",
      lastId: "",
      baseUrl: "",
    };
  },
  created() {
    this.baseUrl =
      process.env.NODE_ENV === "production" ? "/on-java8-web/" : "/";
    console.log("process: ");
    console.log(process);
    this.baseUrl = this.baseUrl + "OnJava8/book/";
    this.lastId = this.$route.params.id;
    this.render();
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.lastId = this.$route.params.id;
    this.render();
  },
  methods: {
    render() {
      let id = this.$route.params.id;
      this.$http.get(this.baseUrl + id).then(
        (response) => {
          // get body data
          if (id == this.lastId) {
            let md = response.body;
            let html = marked(md);
            this.value = html;
            hljs.highlightAll();
          }
          // console.log(this.value);
        },
        (response) => {
          // error callback
        }
      );
    },
  },
  components: {},
};
</script>

<style>
</style>
